<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">AP设备健康度</div> 
      <div class="sn-body"  > 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_deviceApHealth"></div> 
          <vue-seamless-scroll :data="siteHealth" class="seamless-warp" :class-option="optionSetting_deviceApHealth">
            <div class="tr" v-for="(item , index) in siteHealth" :key="index + '_ZL'">
              <div class="td">{{item.name}}</div>
              <div class="td">{{item.value}}</div>
            </div>
          </vue-seamless-scroll>
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
import echarts from 'echarts'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: "deviceApHealth",
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      option: null,
      timer: null,
      siteHealth: [
        {
          name: '这里是AP设备一',
          value: 12
        },{
          name: '这里是AP设备二',
          value: 100
        },{
          name: '这里是AP设备三',
          value: 98
        },{
          name: '这里是AP设备四',
          value: 88
        },
      ],
      average: 78.5
    }
  },
  computed: {
　　optionSetting_deviceApHealth () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // autoPlay: false,
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }, 
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_deviceApHealth'));
      let option = {
        tooltip: {
          formatter: '{a} <br/>{c}'
        },
         series: [{
            name: 'AP设备健康度',
            type: 'gauge', 
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '100%',
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [[0.30, '#ff4500'], [0.70, '#fbff00'], [1, '#00ff43']],
                width: 1,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisLabel: {            // 坐标轴小标记
              fontSize: 12,
              color: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            },
            axisTick: {         // 坐标轴小标记
                length: 10,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor: '#fff', //默认透明
                  shadowBlur: 10
                }
            },
            splitLine: {           // 分隔线
              length: 15,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                width: 1,
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            pointer: {           // 分隔线
              shadowColor: '#fff', //默认透明
              shadowBlur: 5
            },
            title: {
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 14,
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              offsetCenter: [0, '50%'],       // x, y，单位px
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 20,
                color: '#fff'
              }
            },
            data: [{
              value: this.average,
            }]
        }]
      }


      myChart.setOption(option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .chartsdom {
    width: 100%;
    height: calc(100% - 35px);
  }

 
.tr {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
}

.td{
  text-align: center;
  word-break: break-word;
}

.tr>.td:nth-child(1){
  width: 80%;
  text-align: left;
  padding-left: 4%;
  box-sizing: border-box;
}
.tr>.td:nth-child(2){
  width: 20%;
}
 .seamless-warp {
    height: 20px;
    overflow: hidden;
    visibility: visible;
  }
</style>
